<template>
  <div class="my-order-item">
    <div class="img">
      <i v-if="isSpell == 1" class="group-icon"></i>
      <img
        :src="(type == 'usercard'?require('../../assets/images/vip-card.png'):type == 'question'?require('../../assets/images/question-card.png'):img_url + img)"
        alt
      >
    </div>
    <div class="info">
      <div class="info-title shuang">{{title}}</div>
      <div class="info-about">
        <div class="about-price">
          <i
            v-if="type == 'video' || type == 'audio' || type == 'live'"
            :class="(type =='video'?'tag-video':(type == 'audio'?'tag-audio':'tag-live'))"
          ></i>
          <p class="price">¥{{payPrice}}</p>
          <p v-if="isSpell == 1" class="old-price">¥{{oldPrice}}</p>
        </div>
        <div
          class="about-msg"
          v-if="type == 'package' || type == 'live' ||type == 'question'"
        >{{type=="package"?'包含'+bundleCounts+'课程':type == 'live'?liveTitle:'共'+tikuCounts+'题'}}</div>
        <div
          :class="'about-msg '+(spellState == 1?'group-success':spellState == 2?'group-wait':'group-faile')"
          v-if="isSpell == 1"
        >{{(spellState == 1?'拼团成功':spellState == 2?'待成团':'拼团失败')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    //订单类型
    type: {
      type: String,
      value: ""
    },
    //订单图片
    img: {
      type: String,
      value: ""
    },
    // 订单名称
    title: {
      type: String,
      value: ""
    },
    //价格
    oldPrice: {
      value: ""
    },
    // 活动价格
    payPrice: {
      value: ""
    },
    //是否为拼团
    isSpell: {
      value: 0
    },
    // 课程id
    id: {
      value: ""
    },
    //套餐包含课程数
    bundleCounts: {
      value: ""
    },
    //题库包含课程数
    tikuCounts: {
      value: ""
    },
    //直播状态
    liveTitle: {
      value: ""
    },
    //拼团状态
    spellState: {
      value: ""
    }
  },
  data() {
    return {

    };
  },
  created() {
    
  },
  computed: {
    ...mapState(["img_url"])
  }
};
</script>
<style scoped lang="scss">
.my-order-item {
  display: flex;
  padding: 0.12rem;
  background-color: #fff;
  .img {
    width: 1.25rem;
    height: 0.7rem;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.02rem;
    }
    .group-icon {
      background: url("../../assets/images/group-icon.png") no-repeat
        center/cover;
      width: 0.3rem;
      height: 0.12rem;
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.06rem;
    flex: 1;
    .info-title {
      font-size: 0.16rem;
      color: rgba(48, 49, 51, 1);
    }
    .info-about {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .about-price {
        display: flex;
        align-items: center;
        i {
          width: 12px;
          height: 12px;
          //   margin-bottom: 0.02rem;
          &.tag-video {
            background: url("../../assets/images/video-icon.png") no-repeat
              center/contain;
          }
          &.tag-audio {
            background: url("../../assets/images/audio-icon.png") no-repeat
              center/contain;
          }
          &.tag-live {
            background: url("../../assets/images/live-icon.png") no-repeat
              center/contain;
          }
        }
        .price {
          font-size: 0.14rem;
          color: rgba(0, 136, 255, 1);
          margin-left: 0.03rem;
        }
        .old-price {
          font-size: 0.11rem;
          text-decoration: line-through;
          color: #909399;
          margin-left: 0.06rem;
        }
      }
      .about-msg {
        font-size: 0.11rem;
        color: rgba(144, 147, 153, 1);
        &.group-success {
          color: #67c23a;
        }
        &.group-wait {
          color: #ffa400;
        }
        &.group-faile {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>


